import { Welcome } from '@ant-design/x';
import React from 'react';

import type { WelcomeProps } from '@ant-design/x';
import useLocale from '../../../../hooks/useLocale';
import { LOCALES, useCustomizationBgStyle } from '../../common/CustomizationProvider';

export const CustomizationWelcome: React.FC<WelcomeProps> = (props) => {
  const [locale] = useLocale(LOCALES);

  const {
    styles: { background },
  } = useCustomizationBgStyle();

  return (
    <Welcome
      style={{
        width: 290,
      }}
      icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
      title={locale.greeting_short}
      description={locale.description_short}
      className={background}
      {...props}
    />
  );
};

export const CustomizationPrompts: React.FC<any> = () => {
  return <p>Prompts</p>;
};

export const CustomizationSuggestion: React.FC = () => {
  return <p>Suggestion</p>;
};

export const CustomizationBubble: React.FC<any> = () => {
  return <p>Bubble</p>;
};

export const CustomConversations: React.FC<any> = () => {
  return <p>Conversations</p>;
};
